<!-- 批量退料组件 -->
<template>
  <el-dialog
    v-model="dialogData.dialogShow"
    title="批量退料&保存"
    custom-class="tuiliao"
    top="7vh"
    width="80%"
    :loading="procedure.submitLoading"
    :before-close="dialogClose"
    :close-on-click-modal="false"
  >
    <el-form
      ref="batchForm"
      :model="procedure.formData"
      :rules="procedure.formRules"
      label-align="right"
      :label-width="procedure.formLabelWidth"
    >
      <el-row :gutter="10">
        <el-col :xs="21" :sm="12" :md="12" :lg="8" :xl="8">
          <el-form-item prop="programNumber" label="程序号">
            <el-input
              v-model.trim="procedure.formData.programNumber"
              placeholder="请输入程序号"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-button type="primary" @click="queryDetail"
            >查询</el-button
          >
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col
          :span="24"
          v-if="procedure.formData.programNumber && selectData == 1 && procedure.tableData.length"
        >
          <p>
            备料数量(单位) {{ procedure.tableData[0]?.useNum
            }}{{
              procedure.tableData[0]?.useNum &&
              procedure.tableData[0]?.quantityUnit
                ? "(" + procedure.tableData[0]?.quantityUnit + ")"
                : ""
            }}
          </p>
        </el-col>
      </el-row>
    </el-form>
    <el-table
      stripe
      :data="procedure.tableData"
      v-loading="procedure.tableLoading"
      height="82%"
      border
      fit
      highlight-current-row
      tooltip-effect="dark"
    >
      <el-table-column
        type="index"
        width="50"
        label="序号"
        fixed
      ></el-table-column>
      <el-table-column
        prop="prodOrderNo"
        label="生产订单"
        min-width="200"
      ></el-table-column>
      <el-table-column prop="bomName" label="品名" min-width="80"></el-table-column>
      <el-table-column
        prop="bomCode"
        label="料号"
        min-width="80"
      ></el-table-column>
      <el-table-column label="备料数量(单位)" min-width="100">
        <template #default="{ row }"> {{ row.useNum }}{{ row.useNum ? "(张)" : "" }} </template>
      </el-table-column>
      <el-table-column prop="longt" label="长度(单位)" min-width="100">
        <template #default="{ row }">
          {{ row.longt
          }}{{ row.longt && row.lengthUnit ? "(" + row.lengthUnit + ")" : "" }}
        </template>
      </el-table-column>
      <el-table-column prop="width" label="宽度(单位)" min-width="100">
        <template #default="{ row }">
          {{ row.width
          }}{{ row.width && row.widthUnit ? "(" + row.widthUnit + ")" : "" }}
        </template>
      </el-table-column>
      <el-table-column prop="thickness" label="厚度/高度(单位)" min-width="110">
        <template #default="{ row }">
          {{ row.thickness
          }}{{
            row.thickness && row.thicknessUnit
              ? "(" + row.thicknessUnit + ")"
              : ""
          }}
        </template>
      </el-table-column>
      <el-table-column prop="weight" label="成本(单位)" width="100">
        <template #default="{ row }">
          {{ row.weight
          }}{{ row.weight && row.weightUnit ? "(" + row.weightUnit + ")" : "" }}
        </template>
      </el-table-column>
      <el-table-column label="已领料数量" prop="sumConfirmNum" min-width="100"></el-table-column>
      <el-table-column label="本次退料数量" prop="confirmNum" min-width="150">
        <template #default="scope">
          <el-input-number
            v-model="scope.row.theReturnNum"
            :max="scope.row.sumConfirmNum"
            :min="0"
            :precision="2"
            :step="0.1"
            placeholder="本次退料数量"
          ></el-input-number>
        </template
      ></el-table-column>
      <el-table-column label="本次退料成本" prop="currentWeight" min-width="150">
        <template #default="scope">
          <el-input-number
            v-model="scope.row.currentWeight"
            :max="scope.row.weight"
            :min="0"
            :precision="2"
            :step="0.1"
            placeholder="本次退料成本"
          ></el-input-number>
        </template
      ></el-table-column>
    </el-table>
    <template #footer>
      <el-button @click="dialogClose">取 消</el-button>
      <el-button
        type="primary"
        v-if="procedure.tableData.length"
        :disabled="procedure.submitLoading"
        @click="addEvent"
        >确 定</el-button
      >
    </template>
  </el-dialog>
</template>
<script>
import { queryStockPrepHisListBypPogramNumber, returnStockPrepBatch } from "@/api/manage/task";
export default {
  props: {
    dialogShow: {
      type: Boolean,
      default: false
    },
    programNumber: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      dialogData: {
        dialogShow: false
      },
      selectData: 0,
      procedure: {
        programNumber: "",
        submitLoading: false,
        tableLoading: false,
        formLabelWidth: "100px",
        tableData: [],
        formData: {
          programNumber: "",
          pageNum: 1,
          pageRow: 200
        },
        formRules: {
          programNumber: [
            { required: true, message: "请输入程序号", trigger: "blur" }
          ]
        }
      }
    };
  },
  methods: {
    queryDetail() {
      this.$refs["batchForm"].validate(valid => {
        if (valid) {
          this.procedure.tableLoading = true;
          //通过程序号查询备料计划
          queryStockPrepHisListBypPogramNumber(this.procedure.formData)
            .then(res => {
              if (res.code === 0) {
                this.procedure.tableData = res.data;
                this.procedure.tableData.map((item) => {
                  item.theReturnNum = item.sumConfirmNum;
                  item.currentWeight = item.weight;
                });
                this.selectData = new Set(
                  this.procedure.tableData.map(item => item.useNum)
                ).size;
                console.log(this.selectData);
              } else {
                this.$utils.alertMessage(res.message, "error");
              }
              this.procedure.tableLoading = false;
            })
            .catch(() => {
              this.procedure.tableLoading = false;
            });
          }
      });
    },
    // 添加操作
    addEvent() {
      this.$refs["batchForm"].validate(valid => {
        if (valid) {
          if (this.procedure.tableData.length == 0) {
            this.$utils.alertMessage("当前程序号暂无退料信息，请核对", "error");
            return;
          }
          let temp = this.procedure.tableData.every(v => {
            if (v.sumConfirmNum && v.theReturnNum && v.sumConfirmNum >= v.theReturnNum) {
              return true;
            } else {
              if(v.sumConfirmNum >= v.theReturnNum){
                this.$utils.alertMessage("本次退料数量应小于已领料数量", "error");
                return false;
              } else {
                this.$utils.alertMessage("当前程序号暂无领料信息，请核对", "error");
                return false;
              }
            }
          });
          if(temp){
            this.procedure.submitLoading = true;
            // 新增
            returnStockPrepBatch(this.procedure.tableData)
              .then(res => {
                if (res.code === 0) {
                  this.dialogClose();
                  this.$utils.alertMessage("操作成功", "success");
                } else {
                  this.$utils.alertMessage(res.message, "error");
                }
                this.procedure.submitLoading = false;
              })
              .catch(() => {
                this.$utils.alertMessage("操作失败", "error");
                this.procedure.submitLoading = false;
              });
          }
        }
      });
    },
    // 取消操作
    dialogClose() {
      this.$nextTick(() => {
        this.dialogData.dialogShow = false;
        this.$emit("batchReturnClose");
        this.dialogData = this.$options.data().dialogData;
        this.procedure = this.$options.data().procedure;
        this.procedure.submitLoading = false;
      });
    }
  },
  watch: {
    dialogShow(n, o) {
      if (n) {
        this.dialogData.dialogShow = true;
        this.$nextTick(() => {
          this.procedure.formData.programNumber = this.programNumber;
          this.$refs.batchForm.clearValidate();
          this.procedure.formData.programNumber && this.queryDetail();
        });
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.el-pagination__total {
  color: white;
}
.el-pagination__jump {
  color: white;
}
.el-input-number,
.el-select {
  width: 100% !important;
}
.el-input-number,
.el-select {
  width: 100% !important;
}
.search-item {
  float: left;
}
.button-item {
  float: right;
}
@media screen and (max-width: 950px) {
  .button-item {
    float: left;
  }
}
.table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  border: 1px solid #000;
}
.table tr,
.table th,
.table td {
  border: 1px solid #000;
  font-size: 14px;
  height: 22px;
  width: 1%;
}
.el-table .el-form-item {
  margin-bottom: 0;
}
:deep(#messageDialog .el-dialog__body) {
  padding: 0 10px;
  > p {
    font-size: 16px;
    line-height: 32px;
  }
}
.printContent {
  position: fixed;
  left: 120;
  top: 1;
  z-index: 111;
  width: 1048px;
  // height: 748px;
  overflow-y: auto;
  margin-left: 20px;
}
.printContent > div {
  padding: 0px;
  width: 1048px;
  height: auto; /*calc(100% - 40px)*/
}
.printContent div > h2 {
  width: 100%;
  margin-bottom: 0;
  text-align: center;
}
.printTable {
  margin-top: 36px;
}
.order:after {
  /*START 真正起到清除浮动的代码*/
  content: "";
  display: block;
  clear: both;
  /*END 真正起到清除浮动的代码*/
  height: 0;
}
.orderNo {
  width: 300px;
  height: 100px;
  float: left;
}
.orderTime {
  height: 30px;
  float: right;
  margin-right: 20px;
}
.printTable table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  text-align: center;
  border: 1px solid #000;
}
.printTable table tr,
.printTable table th,
.printTable table td {
  border: 1px solid #000;
  font-size: 14px;
  height: 22px;
}
// 单元格高度
.mycss {
  margin-top: 20px;
}
.minecss {
  margin-top: 4px;
}

.minecss td {
  text-align: left;
  text-indent: 10px;
  width: 80px;
}
</style>
